<template>
    <div class="price-info">
        <el-card shadow="never" style="width:100% ; border:none">
            <div slot="header">
                <span class="search-title">价格信息</span>
            </div>
            <el-form :model="priceInfoForm" :rules="rules" ref="priceInfoForm" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="10">
                        <el-form-item label="商品售价" prop="sellPrice">
                            <el-input v-model="priceInfoForm.sellPrice">
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="划线价格" prop="marketPrice">
                            <el-input v-model="priceInfoForm.marketPrice">
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="供货价" prop="supplyPrice">
                            <el-input v-model="priceInfoForm.supplyPrice">
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="计量单位" prop="unit">
                            <el-select
                                v-model="priceInfoForm.unit"
                                placeholder="请选择"
                                style="width:100%"
                            >
                                <el-option
                                    v-for="item in options"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.name"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="团长佣金" prop="commission">
                            <el-input v-model="priceInfoForm.commission">
                                <span slot="append">元</span>
                            </el-input>
                        </el-form-item> </el-col
                    ><el-col :span="10">
                        <el-form-item label="预设点击数" prop="preHitCount">
                            <el-input v-model="priceInfoForm.preHitCount" type="number">
                                <span slot="append">次</span>
                            </el-input>
                        </el-form-item></el-col
                    >
                    <el-col :span="10">
                        <el-form-item label="预设已售" prop="preSalesCount">
                            <el-input v-model="priceInfoForm.preSalesCount">
                                <span slot="append">件</span>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { validatMoney, validatInteger } from '@/utils/validate.js';
import { getUnitList } from '@/api/cornerMark';
import { mapGetters } from 'vuex';
export default {
    name: 'priceInfo',
    porps: {
        mode: ''
    },
    computed: {
        ...mapGetters(['goodsDetailInfo'])
    },
    watch: {
        goodsDetailInfo: function() {
            this.priceInfoForm = {
                ...this.priceInfoForm,
                ...this.goodsDetailInfo.goodsSku
            };
        }
    },
    mounted() {
        this.init();
        // 此阶段props值不一定能取到，使用路由判断
        if (this.$route.path.indexOf('updateProduct') > -1) {
            this.opmode = 1;
            // conerMarkId 为string类型，但是传过来是num类型， 坑
        }
    },
    data() {
        var validateMoney = (rule, value, callback) => {
            if (value && !validatMoney(value)) {
                return callback(new Error('请输入正确的价格格式， 例：100.00'));
            } else {
                if (Number.parseFloat(value) == 0 && rule.field == 'sellPrice') {
                    return callback(new Error('商品售价不能为0'));
                }
                callback();
            }
        };
        var validateInteger = (rule, value, callback) => {
            if (value && !validatInteger(value)) {
                return callback(new Error('请输入大于等于0的整数'));
            } else {
                callback();
            }
        };

        return {
            priceInfoForm: {
                marketPrice: '0.0',
                supplyPrice: '0.0',
                sellPrice: '1.00',
                preSalesCount: '0',
                unit: '',
                commission: '0.0' //佣金
            },
            options: [],
            rules: {
                marketPrice: [
                    {
                        validator: validateMoney,
                        trigger: 'change'
                    }
                ],
                supplyPrice: [
                    {
                        validator: validateMoney,
                        trigger: 'change'
                    },
                    { required: true, message: '请输入商品供货价', trigger: 'change' }
                ],
                sellPrice: [
                    {
                        validator: validateMoney,
                        trigger: 'change'
                    },
                    { required: true, message: '请输入商品售价', trigger: 'change' }
                ],
                commission: [
                    {
                        validator: validateMoney,
                        trigger: 'change'
                    },
                    { required: true, message: '请输入团长佣金', trigger: 'change' }
                ],
                preSalesCount: [
                    {
                        validator: validateInteger,
                        trigger: 'change'
                    },
                    { required: true, message: '请输入预设已售', trigger: 'change' }
                ],
                unit: [{ required: true, message: '请输入计量单位', trigger: 'change' }],
                preHitCount: [
                    { required: true, message: '请填写内容', trigger: 'change' },
                    { validator: validateInteger, trigger: 'change' }
                ]
            }
        };
    },
    methods: {
        init() {
            getUnitList().then(res => {
                if (res.data.success === true) {
                    // console.log(`- unit: `, res.data.data);
                    this.options = res.data.data;
                } else {
                }
            });
            //  this.validateForm()
        },
        validateForm() {
            return this.$refs['priceInfoForm'].validate();
        }
    }
};
</script>

<style scoped>
.search-title {
    font: 18px;
    font-weight: bold;
}

.price-info {
    width: 900px;
}
</style>
